import { FC } from "react"
import { componentPropsType, getComponentByType } from "../../../questioncomponents"
import style from './index.module.scss'
import classnames from 'classnames/bind'
import { QuestionInfoType } from "../../../store/ComponentReducer"
const CBN = classnames.bind(style)

type ComponentLibPropsType = {
    componentList: QuestionInfoType[],
    selectedId: string,
    componentProps: any
    setSelectedId: (id: string) => void
}


const ComponentLib: FC<ComponentLibPropsType> = (props) => {
    const { selectedId = '', componentList = [], setSelectedId, componentProps } = props
    const changeSelectId = (event: MouseEvent, fe_id: string) => {
        event.stopPropagation()
        setSelectedId(fe_id)
    }
    return <>
        {
            componentList.filter((c) => {
                return !c.hide
            }).map((c) => {
                const { type, props, fe_id, lock } = c
                const Component = getComponentByType(type)
                const defaultClass = CBN({
                    'selctedBox': true,
                    'isselect': selectedId === fe_id,
                    'islock': lock
                })
                const newprops: any = {}
                if (componentProps) {
                    switch (type) {
                        case 'questionInput':
                            newprops.placeholder = componentProps[type]
                            break
                        case 'questionTextarea':
                            newprops.placeholder = componentProps[type]
                            break
                        case 'questionTitle':
                            newprops.title = componentProps[type]
                            break
                        case 'questionParagraph':
                            newprops.text = componentProps[type]
                            break
                        case 'questionInfo':
                            const valueArr = componentProps[type].split('|')
                            newprops.title = valueArr[0]
                            newprops.text = valueArr[1]
                            break
                        case 'questionRadio':
                            const options = props!.options
                            const MyIndex = options.findIndex((item: any) => {
                                let flag = item.text === componentProps[type]
                                return flag
                            })
                            newprops.default_option = options[MyIndex].value
                            break
                        case 'questionCheck':
                            let checkoptions = props!.options
                            newprops.options = [];
                            for (let i = 0; i < checkoptions?.length; i++) {
                                const item = { ...checkoptions[i] };
                                const str = componentProps[type] as string;
                                if (str.includes(item.label)) {
                                    item.checked = true;
                                }
                                newprops.options.push(item);
                            }

                            break
                        default:
                            break
                    }
                }
                const totalprops = { ...props, ...newprops }
                return Component ?
                    <div key={fe_id} className={defaultClass} onClick={(event: any) => { changeSelectId(event, fe_id) }}>
                        <div className={CBN('notouch')}>
                            <Component.Component {...totalprops}></Component.Component>
                        </div>
                    </div>
                    : <></>
            })
        }
    </>
}

export default ComponentLib